<template>
  <div class="background-box" ref="box">
    <img :src="data" :style="imageStyle" class="background-image" v-if="data"/>
  </div>
</template>

<script>
export default {
  props: ['data', 'scale', 'leftScale', 'topScale', 'width', 'height'],
  computed: {
    imageStyle() {
      const { scale, leftScale, topScale, width } = this;
      const imgWidth = width / scale;
      const left = - width * leftScale;
      const top = - width * topScale;
      console.log('image width==>', imgWidth, left, top, leftScale, topScale);
      return {
        width: `${imgWidth}px`,
        left: `${left}px`,
        top: `${top}px`,
      };
    }
  }
}
</script>

<style lang="less" scoped>
.background-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .background-image {
      position: absolute;
    }
}
</style>